@import'common';
$blue:#5fc0cd;

@mixin flex($ali:center, $jus:center, $w:100%, $h:60px) {
    display: flex;
    align-items: $ali;
    justify-content: $jus;
    width: $w;
    height: $h;
}

.icon {
    width: 1em;
    height: 1em;
    vertical-align: -0.15em;
    fill: currentColor;
    overflow: hidden;

}

$border:1px solid #c4c4c4;

* {
    justify-content: auto;
}

main {
    overflow-y: auto;
}

header {
    svg {
        font-size: 24px;
    }
}

.main {
    overflow-y: auto;
    width: 100%;

    >div {
        width: 80%;
        @extend .center2;
    }

    &-part1 {

        position: relative;
        @extend .center2;

        >svg {
            font-size: 50px;
            position: absolute;
            top: 60px;
        }

        .img2 {
            @include abs(45px);
        }

        >span {
            @include abs(135px);
            font-weight: bold;
            color: white;
            white-space: nowrap
        }
    }

    &-part3 {
        width: 90%;

        margin-top: 180px;

        p {
            width: 80px;
            @extend .size-m;
            color: #000;
            text-align: left;
            margin: 7px 0;
        }

        >div {

            .icon {
                font-size: 20px;
            }

            >div {
                float: left;
                @extend .center3;
            }
        }
    }
}

.main2 {
    margin-top: 50px;
    color: #868686;
    background: white;
    width: 90%;
    margin-bottom: 100px;

    .box {
        border: $border;
    }

    p {
        text-align: left;
        margin: 5px 0 5px 5%;
        display: block;
    }
}

.end {
    font-size: 12px;
}